@import '~styles/sizes.less';
@import '~styles/colors.less';

@numberDisplays: 3;

.root {
  position: fixed;
  height: @topMenuHeight;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: @chromeBackgroundColor;
  border-radius: 3px 3px 0 0;
  border: 1px solid @chromeBordersColor;
}

.wrapper {
  // position: absolute;
  // left: 50%;
  // width: @topMenuHeight;
  // height: @topMenuHeight;
  // overflow: hidden;
  // transform: translateX(-(@topMenuHeight / 2));
  // transition: all 0.2s ease-out;
  //
  // &:hover {
  //   width: @topMenuHeight * @numberDisplays * 2;
  //   @translate: @topMenuHeight * @numberDisplays + @topMenuHeight / 2;
  //   transform: translateX(-@translate);
  //   .slider {
  //     transform: translateX(@topMenuHeight * @numberDisplays);
  //   }
  // }
}

.slider {
  // position: absolute;
  // top: 0;
  // left: 0;
  // width: @topMenuHeight * @numberDisplays;
  // transition: all 0.2s ease-out;
  // transform: translateX(0);
}
